<template>
  <div class="app-container">
    <div class="function-buttons">
      <el-input v-model="keywords" prefix-icon="el-icon-search" clearable placeholder="请输入内容" style="width: 300px" @keyup.enter.native="getList" />
      <el-button type="primary" size="small" icon="el-icon-search" @click="getList()">搜索</el-button>
      <el-button type="primary" size="small" icon="el-icon-plus" @click="add">新增</el-button>
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>
        <el-table-column align="center" label="额外属性">
          <template slot-scope="scope">
            <span>{{ scope.row.extraName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="提交人">
          <template slot-scope="scope">
            <span>{{ scope.row.submitter }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="修改人">
          <template slot-scope="scope">
            <span>{{ scope.row.mender }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="填写设备">
          <template slot-scope="scope">
            <span>{{ scope.row.equipmentName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作系统">
          <template slot-scope="scope">
            <span>{{ scope.row.operatingSystem }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="浏览器">
          <template slot-scope="scope">
            <span>{{ scope.row.browser }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="ip">
          <template slot-scope="scope">
            <span>{{ scope.row.ip }}</span>
          </template>
        </el-table-column>

        <el-table-column v-for="accessoryKey in accessoryArray" :key="accessoryKey" align="center" :label="accessoryKey">
          <template slot-scope="scope">
            <span>{{ scope.row.accessory[accessoryKey] }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="update(scope.row)">编辑</el-button>
            <el-popover v-model="scope.row.visible" placement="top">
              <p>确定删除？</p>
              <div>
                <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                <el-button type="primary" @click="del(scope.row.esId)">确定</el-button>
              </div>
              <el-button slot="reference" type="text">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="pageChange" />
    </div>
    <div>
      <el-dialog title="更新" :visible.sync="saveForm.visible">
        <el-form ref="saveForm" :model="saveForm.props" :rules="saveForm.rules" label-width="80px">
          <el-form-item label="扩展属性" prop="extraName">
            <el-input v-model="saveForm.props.extraName" />
          </el-form-item>
          <el-form-item label="提交人" prop="submitter">
            <el-input v-model="saveForm.props.submitter" />
          </el-form-item>
          <el-form-item label="修改人" prop="mender">
            <el-input v-model="saveForm.props.mender" />
          </el-form-item>
          <el-form-item label="填写设备" prop="equipmentName">
            <el-input v-model="saveForm.props.equipmentName" />
          </el-form-item>
          <el-form-item label="操作系统" prop="operatingSystem">
            <el-input v-model="saveForm.props.operatingSystem" />
          </el-form-item>
          <el-form-item label="浏览器" prop="browser">
            <el-input v-model="saveForm.props.browser" />
          </el-form-item>
          <el-form-item label="ip" prop="ip">
            <el-input v-model="saveForm.props.ip" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="saveForm.visible = false">取 消</el-button>
          <el-button type="primary" @click="doSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="新 增" :visible.sync="addData.visible">
        <el-form ref="addData" :model="addData.props" :rules="saveForm.rules" label-width="80px">
          <el-form-item label="扩展属性" prop="extraName">
            <el-input v-model="addData.props.extraName" />
          </el-form-item>
          <el-form-item label="提交人" prop="submitter">
            <el-input v-model="addData.props.submitter" />
          </el-form-item>
          <el-form-item label="修改人" prop="mender">
            <el-input v-model="addData.props.mender" />
          </el-form-item>
          <el-form-item label="填写设备" prop="equipmentName">
            <el-input v-model="addData.props.equipmentName" />
          </el-form-item>
          <el-form-item label="操作系统" prop="operatingSystem">
            <el-input v-model="addData.props.operatingSystem" />
          </el-form-item>
          <el-form-item label="浏览器" prop="browser">
            <el-input v-model="addData.props.browser" />
          </el-form-item>
          <el-form-item label="ip" prop="ip">
            <el-input v-model="addData.props.ip" />
          </el-form-item>
          <template>
            <div class="checkbox">
              <div class="input">
                <p v-for="item in inputs" :key="item.value">
                  <span>自定义字段</span><br>
                  <el-input v-model="item.key" style="width: 50%" placeholder="字段名" />
                  <el-input v-model="item.val" style="width: 50%" placeholder="字段内容" />
                </p>
                <el-button type="primary" @click="addInput()">添加字段</el-button>
              </div>
            </div>
          </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addData.visible = false">取 消</el-button>
          <el-button type="primary" @click="newSave">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import request from '@/utils/request'
export default {
  name: 'TopicList',
  components: { Pagination },
  data() {
    return {
      keywords: null,
      formInfoIdByFrom: null,
      inputs: [],
      submsg: {},
      parameters: {},
      accessoryArray: [],
      visible: false,
      uploadAction: this.cfg.apiDomain + '/file/upload/upload?uploadItem=topicPostImg',
      list: null,
      accessoryList: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      addData: {
        visible: false,
        props: {
          esId: null,
          extraName: null,
          accessory: null,
          submitter: null,
          createTime: null,
          mender: null,
          updateTime: null,
          equipmentName: null,
          operatingSystem: null,
          browser: null,
          fromInfoId: null
        }
      },
      saveForm: {
        visible: false,
        props: {
          esId: null,
          extraName: null,
          accessory: null,
          submitter: null,
          createTime: null,
          mender: null,
          updateTime: null,
          equipmentName: null,
          operatingSystem: null,
          browser: null,
          fromInfoId: null
        }
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.getRouterData()
    this.getList({
      pageNo: this.listQuery.pageNo
    })
  },
  methods: {
    pageChange(page) {
      this.getList({
        pageNo: page.page
      })
    },
    // 获取数据
    getRouterData() {
      // eslint-disable-next-line eqeqeq
      this.formInfoIdByFrom = this.$router.history.current.query.id;
    },
    getList() {
      this.listLoading = true
      request({
        url: '/fromData/getPageList',
        method: 'post',
        data: {
          fromInfoId: this.formInfoIdByFrom,
          keyword: this.keywords,
          pageNo: this.listQuery.pageNo,
          pageSize: this.listQuery.pageSize
        }
      }).then(res => {
        const data = res.data
        this.list = data.rows
        const accessory = {};
        data.rows.forEach(item => {
          Object.assign(accessory, item.accessory || {});
        })
        const accessoryArr = [];
        for (const key in accessory) {
          accessoryArr.push(key);
        }
        this.accessoryArray = accessoryArr;
        this.total = data.total
        this.listLoading = false
        this.accessoryList = this.list.accessory
      })
    },
    save() {
      this.saveForm.props = {
        esId: null,
        extraName: null,
        accessory: null,
        submitter: null,
        createTime: null,
        mender: null,
        updateTime: null,
        equipmentName: null,
        operatingSystem: null,
        browser: null,
        fromInfoId: this.formInfoId
      };
      this.saveForm.visible = true
    },
    add() {
      this.saveForm.props = {
        esId: null,
        extraName: null,
        accessory: null,
        submitter: null,
        createTime: null,
        mender: null,
        updateTime: null,
        equipmentName: null,
        operatingSystem: null,
        browser: null,
        fromInfoId: this.formInfoIdByFrom
      };
      this.addData.visible = true
    },
    update(data) {
      this.saveForm.props = {
        esId: data.esId,
        extraName: data.extraName,
        accessory: data.accessory,
        submitter: data.submitter,
        createTime: data.createTime,
        mender: data.mender,
        updateTime: data.updateTime,
        equipmentName: data.equipmentName,
        operatingSystem: data.operatingSystem,
        browser: data.browser,
        fromInfoId: data.fromInfoId
      };
      this.saveForm.visible = true
    },
    del(esId) {
      request({
        url: '/fromData/delete',
        method: 'post',
        data: {
          esId: esId,
          fromInfoId: this.formInfoIdByFrom
        }
      }).then(res => {
        this.$message.success('删除成功')
        this.getList({
          pageNo: 1
        });
      })
    },
    doSave() {
      const _this = this;
      this.$refs.saveForm.validate(valid => {
        if (!valid) {
          return;
        }
        request({
          url: '/fromData/save',
          method: 'post',
          data: {
            esId: _this.saveForm.props.esId,
            extraName: _this.saveForm.props.extraName,
            // accessory: _this.saveForm.props.accessory,
            submitter: _this.saveForm.props.submitter,
            createTime: _this.saveForm.props.createTime,
            mender: _this.saveForm.props.mender,
            updateTime: _this.saveForm.props.updateTime,
            equipmentName: _this.saveForm.props.equipmentName,
            operatingSystem: _this.saveForm.props.operatingSystem,
            browser: _this.saveForm.props.browser,
            fromInfoId: this.formInfoIdByFrom
          }
        }).then(res => {
          _this.$message.success('修改成功');
          _this.getList({
            pageNo: 1
          });
          _this.saveForm.visible = false;
        })
      });
    },
    newSave() {
      const _this = this;
      const sb = _this.submsg
      const ac = {};
      const length = sb.length;
      if (length >= 1) {
        for (const i of sb) {
          ac[i['key']] = i.val;
        }
      }
      this.$refs.addData.validate(valid => {
        if (!valid) {
          return;
        }
        request({
          url: '/fromData/save',
          method: 'post',
          data: {
            esId: _this.addData.props.esId,
            extraName: _this.addData.props.extraName,
            accessory: ac,
            submitter: _this.addData.props.submitter,
            createTime: _this.addData.props.createTime,
            mender: _this.addData.props.mender,
            updateTime: _this.addData.props.updateTime,
            equipmentName: _this.addData.props.equipmentName,
            operatingSystem: _this.addData.props.operatingSystem,
            browser: _this.addData.props.browser,
            fromInfoId: this.formInfoIdByFrom
          }
        }).then(res => {
          _this.$message.success('添加成功');
          _this.getList({
            pageNo: 1
          });
          _this.addData.visible = false;
        })
      });
    },
    addInput() {
      const obj = {};
      obj.key = '';
      obj.val = '';
      this.inputs.push(obj);
      this.submsg = this.inputs;
    },
    postImgUploadSuccess(res, file) {
      if (res.code !== 200) {
        this.$message.error('上传失败: ' + res.message);
        return;
      }
      this.saveForm.props.postImgPath = res.data.url;
    }
  }
}
</script>
